<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>贪吃蛇进入界面</title>
    <style>
        body{
            background-color: black;
        }
    </style>

    <script type="text/javascript">
        var RADIUS=5;
        var width=600;
        var height=600;
        var balls=new Array();
        const colors = ["#33B5E5","#0099CC","#AA66CC","#9933CC","#99CC00","#669900","#FFBB33","#FF8800","#FF4444","#CC0000"]
        function canvass(){
            var canvas=document.getElementById("canvas");
            console.log(document.body.clientHeight);
            console.log(document.body.clientWidth);
            canvas.width=width;
            canvas.height=height;
            var context= canvas.getContext("2d");
            for(var num=0;num<3;num++) {
                addballs(context,num * 17 * 2 * (RADIUS + 1), 0, num);
            }
            renderDigit( context );
        }
        function key(){
            var canvas=document.getElementById("canvas");
            var context= canvas.getContext("2d");
            var event=window.event;
            if(event.keyCode==39) {
                setInterval(function () {
                    renderDigit(context)
                    update(context);
                }, 50);
            }
        }
        function update(context){
            for( var i = 0 ; i < balls.length ; i ++ ){
                balls[i].x += balls[i].vx;
                balls[i].y += balls[i].vy;
                balls[i].vy += balls[i].g;
                if( balls[i].y >= width-RADIUS ){
                    balls[i].y = height-RADIUS;
                    balls[i].vy = - balls[i].vy*0.35;
                }
            }
            var cnt = 0
            for( var i = 0 ; i < balls.length ; i ++ )
                if( balls[i].x + RADIUS > 0 && balls[i].x -RADIUS <width )
                    balls[cnt++] = balls[i]
            while( balls.length > cnt ){
                balls.pop();
            }
            if(balls.length==0){
                window.location.href="she1.html"
            }
        }
        function addballs(context,x , y , num) {
                for (var i = 0; i < word[num].length; i++) {
                    for (var j = 0; j < word[num][i].length; j++) {
                        if (word[num][i][j] == 1) {
                            var aBall = {
                                x: x + j * 2 * (RADIUS + 1) + (RADIUS + 1),
                                y: y + i * 2 * (RADIUS + 1) + (RADIUS + 1),
                                g: 1.5 + Math.random(),
                                vx: Math.pow(-1, Math.ceil(Math.random() * 1000)) * 4,
                                vy: -5,
                                color: colors[Math.floor(Math.random() * colors.length)]
                            }
                            balls.push(aBall)
                        }
                    }
                }
            }
        function renderDigit( cxt ){
            cxt.clearRect(0,0,width,height);
            for( var i = 0 ; i < balls.length ; i ++ ){
                cxt.fillStyle=balls[i].color;
                cxt.beginPath();
                cxt.arc( balls[i].x , balls[i].y , RADIUS , 0 , 2*Math.PI , true );
                cxt.closePath();
                cxt.fill();
            }
        }
    </script>
</head>
<body onload="canvass()" onkeydown="key()" style="text-align: center">
<canvas id="canvas"></canvas>
<script src="tanchishe.js"></script>
<div style="color: red"><strong>友情提示:轻敲键盘右键头方可进入游戏,长按可加速进入.</div>
</body>
</html>